import React from 'react';
import { Outlet } from 'react-router-dom';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import './App.scss'
import { useNavigate } from 'react-router-dom';
import "./assets/images/shoesdogLogo1.png"


type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const items: MenuProps['items'] = [
  getItem('仪表盘', 'panel', <MailOutlined />),

  getItem('用户管理', 'user', <MailOutlined />),

  getItem('审核', 'examine', <AppstoreOutlined />, [
    getItem('审核文章', 'examineArticle'),
    // getItem('审核评分', 'examineRate'),
    // getItem('审核交易', 'examineTrade')
  ]),

  getItem('banner管理', 'banner', <SettingOutlined />),

];

function App() {

  const navigate = useNavigate()

  const clickAction = ({ item = '', key = '', keyPath = '', domEvent = '' }) => {
    navigate({ pathname: key })
  }

  return (
    <div className='page'>
      <div className='nav'>
        <div className='logo'><img src="http://localhost:8080/images/shoesdogLogo1.png" alt="" /></div>
        <div>
          <Menu
            style={{ width: 256 }}
            defaultSelectedKeys={['panel']}
            mode="inline"
            items={items}
            onClick={clickAction}
          />
        </div>
      </div>
      <div className='main'>
        <Outlet></Outlet>
      </div>

    </div>
  );
}

export default App;